<script setup>
    import { getPartyHomeData } from '@/api/party'
    import { onMounted } from 'vue'

    import LeftAge from './components/LeftAge.vue'
    import LeftPartyMemberDistribution from './components/LeftPartyMemberDistribution.vue'
    import LeftOpen from './components/LeftOpen.vue'
    import RightResource from './components/RightResource.vue'
    import RightGridMember from './components/RightGridMember.vue'
    import RightMeeting from './components/RightMeeting.vue'

    import CenterMap from './components/CenterMap.vue'
    import CenterPartyMemberList from './components/CenterPartyMemberList.vue'

    import OpenInfoList from './components/OpenInfoList.vue'
    import PartyMemberList from './components/PartyMemberList.vue'

    // 三务公开列表
    let showOpenList = $ref(false)
    let openItemInfo = $ref({})

    // 党员列表
    let showMemberList = $ref(false)

    let dataLoading = $ref(true)

    onMounted(() => {
        getData()
    })

    // 党龄年龄
    let partyAgeData = $ref([])

    // 党龄对应的数量
    let ageCount = $ref([])

    // 党员分布类型
    let partyTypeData = $ref([])

    // 党员分布数量
    let partyTypeCount = $ref([])

    // 三务公开
    let openList = $ref([])

    // 党支部列表
    let branchList = $ref([])

    // 党员资源的类型
    let resourceTypeData = $ref([])

    // 党员资源的数量
    let resourceCountData = $ref([])

    // 党员网格员
    let gridList = $ref([])

    // 三会一课
    let shList = $ref([])

    // 党员信息
    let partyMemberList = $ref([])


    const getData = () => {
        getPartyHomeData().then(res => {
            dataLoading = false

            let { partyAge, ageCountAll, personType, personCount, yzPartyOpenList, yzPartyBranchList, resourceType, resourceCount, yzGridPeronList, xtPlatformListClass, yzPartyMemberList } = res.result

            partyAgeData = partyAge
            ageCount = ageCountAll

            partyTypeData = personType
            partyTypeCount = personCount

            openList = yzPartyOpenList

            branchList = yzPartyBranchList

            resourceTypeData = resourceType
            resourceCountData = resourceCount

            gridList = yzGridPeronList

            shList = xtPlatformListClass

            partyMemberList = yzPartyMemberList

        })
    }

</script>

<template>
    <div class="content-main party-wrap" v-loading="dataLoading">
        <template v-if="!dataLoading">
            <div class="left-card">
    
                <!-- 党龄分布 -->
                <left-age
                    :data="partyAgeData"
                    :ageCount="ageCount"
                ></left-age>
    
                <!-- 党员分布 -->
                <left-party-member-distribution
                    :partyTypeData="partyTypeData"
                    :partyTypeCount="partyTypeCount"
                ></left-party-member-distribution>
    
                <!-- 三务公开 -->
                <left-open 
                    @clickDetails="openItemInfo = $event; showOpenList=true"
                    :list="openList"
                ></left-open>
    
            </div>
    
    
            <div class="right-card">
    
                <!-- 党员资源 -->
                <right-resource
                    :type="resourceTypeData"
                    :data="resourceCountData"
                ></right-resource>
    
                <!-- 网格党员 -->
                <right-grid-member :list="gridList"></right-grid-member>
    
                <!-- 三会一课 -->
                <right-meeting :data="shList"></right-meeting>
                
            </div>
    
            <div class="center-main">
                <center-map 
                    :list="branchList"
                ></center-map>
                <center-party-member-list
                    @clickDetails="showMemberList=true"
                    :list="partyMemberList"
                ></center-party-member-list>
            </div>
    
        </template>
        
        <!-- 三务公开详情列表 -->
        <open-info-list 
            @hideOpenList="showOpenList=false" 
            v-if="showOpenList"
            :openItemInfo="openItemInfo"
        ></open-info-list>

        <!-- 党员列表 -->
        <party-member-list @hideMemberList="showMemberList=false" v-if="showMemberList"></party-member-list>

    </div>
</template>

<style lang="less" scoped>
    .party-wrap{
        .left-card, .right-card{
            width: 496px;
        }

        .center-main{
            margin: 110px 546px 0;
        }
    }
</style>